<html>
<head>
<link rel=StyleSheet href="static/style/style.css" type="text/css" media=screen>
<link rel=StyleSheet href="static/style/map_style.css" type="text/css" media=screen>
<script type="text/javascript" src="static/scripts/jquery-1.7.2.min.js"></script>
<script src="static/scripts/jquery.cookie.js"></script> 
<script language = "javascript">
//idea 1: Server sends a "windowed" view of the map. This windowed view is 0 based, regardless of the actual coordinate the user is at
//Sub-idea 1: The server only sends the differences from the last request, not the full map

var map_diff;				

var loc = window.location, new_uri;
if (loc.protocol === "https:") {
    new_uri = "wss:";
} else {
    new_uri = "ws:";
}
new_uri += "//" + loc.host;
new_uri += loc.pathname + "websocket";
var ws = new WebSocket(new_uri);

ws.onopen = function() {
   ws.send($.cookie("user"));
   
};

ws.onmessage = function (evt) {
   if(evt.data.substring(0, 5) == '{"gam')
   {
	//document.write(evt.data);
	map_diff = window.JSON.parse(evt.data)
	moveMap(map_diff.gamemap.dir, change_map)
   }
   if(evt.data.substring(0, 5) == '{"inv')
   {
	inv = window.JSON.parse(evt.data)
	set_inventory(inv);
   }
   if(evt.data.substring(0, 7) == '{"info"')
   {
	inf = window.JSON.parse(evt.data);
	set_info(inf);
   }
    
};


function set_inventory(inv)
{
	$(".inv-box").html("")
	
	for(i in inv.inv)
	{
		obj_type = i;
		count = inv.inv[i]
		
		$("<div>", {"class":"inv_item "+obj_type}).html(count+"x "+obj_type).appendTo(".inv-box");
	}
}

function set_info(inf)
{
	$(".info-box").html(inf.info)
}

function moveMap(dir, callback)
{
	if(dir == "down")
	{
		$(".map-box").animate({
    		"marginTop" : "-=20px"
		}, {"duration":50});
	}
	if(dir == "left")
	{
		$(".map-box").animate({
				"marginLeft" : "+=20px"
		}, {"duration":50});
	}
	if(dir == "up")
	{
		$(".map-box").animate({
    		"marginTop" : "+=20px"
		}, {"duration":50});
		
	}
	if(dir == "right")
	{
		$(".map-box").animate({
			"marginLeft" : "-=20px"
		}, {"duration":50});
		
	}
	$(".map-box").animate({
    		"marginTop" : "-20px",
			"marginLeft" : "-20px"
		}, {
		"duration": 0,
		"complete":callback
		}
		);

}

function handle_key_down(e)
{
	//alert(e.keycode);
	if(e.keyCode == 40)
	{
		//moveMap("down")
		ws.send("dig d");
	}
	if(e.keyCode == 37)
	{
		//moveMap("right");
		ws.send("dig w");
	}
	if(e.keyCode == 39)
	{
		//moveMap("left");
		ws.send("dig e");
	}
	if(e.keyCode == 38)
	{
		//moveMap("up");
		ws.send("dig u");
	}
}

function change_map(){
	var char_map = "(o)/^\\0[]S ";
	
	
	var map = map_diff.gamemap.map
	for(var tile in map)
	{
		if(tile != "16_10"){
		
			if(map[tile] < 50)
			{
				$("#"+tile).removeClass( "tile0 tile1 tile2 tile3 tile4 tile5 tile21 tile22 tile23 tile24 tile25 ship-tile")
				$("#"+tile).addClass( "tile"+map[tile] )
				$("#"+tile).html(" ");
			}
			else if([tile] >= 100)
			{
				tnum = map[tile] - 100;
				$("#"+tile).removeClass( "tile0 tile1 tile2 tile3 tile4 tile5 tile21 tile22 tile23 tile24 tile25 ship-tile" )
				$("#"+tile).addClass( "ship-tile" );
				$("#"+tile).html(char_map.charAt(tnum));
			}
		}
		
	}
}



$(document).ready(function() {
for(var j = 19; j >= 0 ; j--)
{
	$("<div/>", { "class":"tile-row", "id": "row"+j }).appendTo(".map-box");
	for(var i = 0; i < 33; i++)
	{
		
		$("<div>", {"class":"tile tile0", "id":i+"_"+j}).html(" ").appendTo("#row"+j);
		
	}
}
   

document.getElementById('kinput').onkeyup = handle_key_down;


});

</script>
</head>

<body>
<div class = "container">
	<div class = "container3">
		<div class = "map-box"></div>
		<div class = "tile ptile tile0" id="ptile">o</div>
	</div>
	<div class = "container2">
		<div class = "upgr-box"></div>
		<div class = "inv-box"></div>
	</div>
	<br style="clear: left;" />
</div>

	<div class = "shop-container">
		<div class = "shop-left">
			<div class = "shop-player-inv"></div>
			<div class = "shop-player-buy"></div>
		</div>
		<div class = "shop-right">
			<div class = "shop-inv"></div>
			<div class = "shop-buy"></div>
		</div>
	</div>

<div class = "info-box"></div>
<div class = "chat-box"><input id = "kinput" type="text" size="30"></div>

</body>
</html>